<template>
  <div class="comment">
      <!-- 提交评论 -->
    <h3>发表评论</h3>
    <textarea placeholder="请输入..." maxlength="100" v-model="commentContent"></textarea>
    <van-button plain hairline type="info" size="large" @click="postComment">提交评论</van-button>

    <!-- 评论内容楼层 -->
    <ul class="comments_list">
      <li class="comments" v-for=" (item,i) in commentsList" :key="i">
        <div class="com_top">
          <span class="name">{{item.user_name}}:&nbsp;{{i+1}}楼</span>
        </div>
        <div class="com_content">
            {{item.content}}
        </div>
        <p class="time">{{item.add_time|dateFormat}}</p>
        <hr>
      </li>
    </ul>
    <!-- 查看更多 -->
    <van-button plain hairline type="info" size="large" @click="getMoreList">加载更多</van-button>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                pageindex: 1,
                commentsList: [],
                commentContent: ''
            }
        },
        created() {
            this.getcomments()
        },
        methods: {
            //获取评论内容
            async getcomments() {
                var count = 0;
                const {
                    data
                } = await this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageindex)
                if (data.status === 0) {
                    data.message.forEach(item => {
                        if (!item.user_name) {
                            item.user_name = "没有名字的用户"
                        }
                        if (!item.content) {
                            item.content = "此用户啥都没写!"
                        }
                    })
                    this.commentsList = this.commentsList.concat(data.message)
                } else {
                    console.log("错误");

                }
            },
            //加载更多评论
            getMoreList() {
                this.pageindex++
                    this.getcomments()
            },

            // 提交评论
            postComment() {
                // 先判断输入内容是否为空
                if (this.commentContent.trim().length === 0) {
                    return this.$toast('请输入内容!') //vant toast提示框
                }
                this.$http.post('api/postcomment/' + this.id, {
                    content: this.commentContent.trim()
                }, {
                    emulateJSON: true
                }).then(result => {
                    if (result.body.status === 0) {
                        //设置第一条评论数组对象
                        var obj = {
                                user_name: "匿名用户",
                                add_time: new Date(),
                                content: this.commentContent.trim()
                            }
                            //将第一条评论加到评论数组的首部 
                        this.commentsList.unshift(obj);
                        this.commentContent = "";
                    }
                })

            }

        },
        props: ['id']
    }
</script>
<style lang="scss" scoped>
    .comment {
        textarea {
            margin: 5px 0;
        }
        .comments_list {
            margin: 15px 0;
            .com_top {
                .name {
                    padding-left: 15px;
                }
                .name1 {
                    font-size: 12px;
                }
            }
            .com_content {
                margin: 20px 0;
                text-indent: 2rem;
                font-size: 14px;
            }
            .time {
                padding-left: 5px;
                font-size: 13px;
            }
        }
    }
</style>